<template>
  <div>
    <div class="resource_body">
      <div class="commons_top">
        <div class="commons_back" @click="$router.go(-1)">
          <img src="@/assets/index/back.png" />
        </div>
        <span class="commons_title">搜索结果</span>
        <img
          src="@/assets/common/search.png"
          class="share_icon"
          @click="searchTab()"
        />
      </div>
      <div class="filter_box">
        <!-- tab切换 -->
        <div class="filter_con" v-for="(item,index) in listType" :key="index">
          <div
            :class="
              item.searchType == searchType
                ? 'filter_hover filter_text'
                : 'filter_text'
            "
            @click="setDataList(item.resourceType, item.name, item.searchType)"
          >
          <span>{{ item.name }}</span>

            <span v-if="typeCount">({{item.resourceType == 1 ? typeCount[0].num : item.resourceType == 4 ? typeCount[3].num : typeCount[4].num}})</span>
            <!-- <span v-else>111</span> -->
          </div>
        </div>

        <div class="filter_container">
          <el-button @click="drawer = true" style="margin-left: 12px;">
            筛选
          <img src="@/assets/common/filter.png" class="filter_icon" />
          </el-button>
          <el-drawer
            class="filter_con"
            :visible.sync="drawer"
            :with-header="false"
            :modal-append-to-body="false"
          >
            <filterIndex
            :resourceType="resourceType"
            :searchType ="searchType"
            :drawer="drawer"
            @show="handleShow"
            @diyId="handleListId">
            </filterIndex>
          </el-drawer>
        </div>
      </div>
      <div class="total_resource" v-if="totalCount == null && !loading">
        为您找到0条资源
      </div>
      <div class="total_resource" v-if="totalCount != null && !loading">
        为您找到{{ totalCount }}条资源
      </div>
    </div>
    <div class="resource_main" v-if="!loading" >
      <resource
        :pageList="pageList"
        :searchType="searchType"
        :isLast="isLast"
        :isNull="isNull"
        :loading="loading"
        v-on:nextList="nextList"
      ></resource>
    </div>
      <p v-if="loading" class="page-infinite-loading resource_loading">
        <span>
          <mt-spinner type="fading-circle"></mt-spinner>
          加载中...
        </span>
      </p>  </div>
</template>

<script>
import { Toast } from "mint-ui";
import { getResourceListAPI, getList,getListCount } from "@/api/resource.js";
import resource from "@/components/resource";
import "@static/css/common.css";
import filterIndex from "@/views/resource/filterIndex";

export default {
  name: "resourceindex",
  components: {
    resource,
    filterIndex
  },
  data() {
    return {
      resourceType:1,
      drawer: false,
      listType: [
        { name: "图书", searchType: 1, resourceType: 1 },
        { name: "视频", searchType: 2, resourceType: 4 },
        { name: "音频", searchType: 3, resourceType: 5 }
      ],
      resourceList: {},
      pageList: [],
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        resourceType: "1",
        diyTypeCode: "",
        labelContentDiyTypeId: "",
        // 搜索内容
        content: "",
        // 页面ID
        orderBy: ""
      },
      totalPage: null,
      inputValue: "",
      searchType: 1,
      totalCount: "",
      isNull: "",
      isLast: "",
      loading: false,
      swiperOption: {
        //可视区域个数
        slidesPerView: "auto"
      },
      typeCount:"",
      diyTypeCount:""
    };
  },

  created() {
    this.getResourceList();
    if (this.$route.query.obj && this.$route.query.obj.diyTypeCode) {
      //分类
      this.listQuery.diyTypeCode = this.$route.query.obj.diyTypeCode.join(",");
    }
    if (this.$route.query.obj && this.$route.query.obj.labelContentDiyTypeId) {
      //标签
      this.listQuery.labelContentDiyTypeId = this.$route.query.obj.labelContentDiyTypeId.join(
        ","
      );
    }
    if (this.$route.query.obj && this.$route.query.obj.resourceType) {
      //资源类型
      this.listQuery.resourceType = this.$route.query.obj.resourceType;
    }
    if (this.$route.query.obj && this.$route.query.obj.content) {
      //搜索词
      this.listQuery.content = this.$route.query.obj.content;

      this.inputValue = this.$route.query.obj.content;
    }
    this.getList();
    this.getListCountMeth();
  },
    watch:{
    searchType(){
      this.loading = true
      console.log(222)
    }
  },
  methods: {
    getResourceList() {
      let that = this;
      getResourceListAPI().then(res => {
        //获取资源列表--nav
        if (res.data.code == 0) {
          that.resourceList = res.data.data;
        } else {
          Toast(res.data.msg);
        }
      });
    },
    getList() {
      //资源列表
      this.loading = true;
      getList(this.listQuery).then(res => {
        if (res.data.code == 0) {
          var list = [];
          if (this.listQuery.pageNum == 1) {
            //第一页
            list = res.data.data.resList;
          } else {
            list = this.pageList.concat(res.data.data.resList);
          }
          this.pageList = list;
          this.totalPage = res.data.data.pageCount;
          this.totalCount = res.data.data.totalCount;
          this.isNull = list && list.length > 0 ? false : true;
          this.isLast =
          res.data.data.pageCount == this.listQuery.pageNum ? true : false;
            if(this.resourceType == 1){
              this.typeCount[0].num = this.totalCount
            }else if(this.resourceType == 4){
              this.typeCount[3].num = this.totalCount
            }else{
              this.typeCount[4].num = this.totalCount

            }
        } else {
          Toast(res.data.msg);
        }
        this.loading = false;
      });
    },
    getListCountMeth(){
      // 获取资源列表数量
      getListCount({content:this.listQuery.content}).then(res=>{
        this.typeCount = res.data.data
      })
    },
    nextList() {
      //资源分页
      if (this.totalPage && this.totalPage > this.listQuery.pageNum) {
        this.listQuery.pageNum = this.listQuery.pageNum + 1;
        this.getList();
      }
    },
    // 切换tab
    setDataList(index, name, search) {
      // this.loading =true
      this.listQuery.diyTypeCode = ""
      this.searchType = search;
      // 请求类型（图书，视频，音频）
      this.listQuery.resourceType = index;
      this.resourceType = this.listQuery.resourceType;
      console.log(this.resourceType)
      this.listQuery.pageNum = 1;
      this.getList();
    },
    searchTab() {
      this.$router.replace({
        name: "search"
      });
    },
    handleShow(val){
      this.drawer = val
    },
	handleListId(val) {
    console.log(val.toString(),444)
	  this.listQuery.diyTypeCode = val.toString();
    this.getList();

	}
  }
};
</script>

<style scoped>
.resource_body {
  position: fixed;
  background: #fff;
  width: 100%;
  /* overflow: hidden; */
  padding-bottom: 0.1rem;
  z-index: 100;
}
.resource_body .commons_top {
  background: #fff;
  position: relative;
  z-index: 10;
}
.resource_main {
  padding-top:2.4rem;
}
.resource_loading{
    padding-top:3rem;

}

/* headerTitle */
.share_icon {
  width: 0.36rem;
  height: 0.36rem;
  margin: auto 0 auto 30%;
}
/*搜索box*/
.search_box {
  height: 0.66rem;
}
.search_box .search_content {
  background: #fff;
  width: 94%;
  margin: 0 3%;
  border-radius: 0.33rem;
  margin-right: 0.4rem;
  height: 0.74rem;
  color: #939393;
  display: flex;
  align-items: center;
}
.search_box .search_icon {
  width: 0.3rem;
  height: 0.3rem;
  float: left;
  margin: 0.22rem;
}
/* input---placeholder---webkit */
::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #b4b9c3;
}
/* 头部滑动导航 */
.nav_box {
  width: 100%;
  height: 1rem;
  overflow: hidden;
}
.nav_swiper {
  width: 1.45rem !important;
  text-align: center;
}
.nav_content {
  white-space: nowrap;
  width: 100%;
  padding: 0 0.1rem;
  box-sizing: border-box;
}
.nav_name {
  display: inline-block;
  font-size: 15px;
  color: #d4ecff;
  /* padding:0 0.4rem; */
  font-weight: 500;
  line-height: 0.97rem;
  position: relative;
}
.nav_name:first-child {
  padding-left: 0.15rem;
}
.nav_name:last-child {
  padding-left: 0.15rem;
}
.nav_hover {
  /* border-bottom:solid 2px #fff; */
  display: inline-block;
  font-weight: bold;
  font-size: 18px;
}
.nav_hover::after {
  content: "";
  display: block;
  width: 0.4rem;
  height: 0.06rem;
  background: #fff;
  border-radius: 3px;
  margin: 0 auto;
  margin-top: -0.14rem;
}
/* 筛选box */
.filter_box {
  /* border-bottom: solid 1px #e3e3e3; */
  height: 0.88rem;
  line-height: 0.88rem;
  text-align: center;
  display: flex;
  box-shadow: 0px -1px 42px 0px rgba(223, 223, 223, 0.6);
  padding-top: 0.18rem;
  box-sizing: border-box;
}
.filter_box .filter_text {
  flex: 1;
  font-weight: 500;
  color: #8f8dab;
  box-sizing: border-box;
  font-size: 13px;
}
.filter_con {
  flex: 1;
}

/deep/ .el-rate__icon,
.el-rate__item {
  z-index: -1;
}
.filter_box .filter_hover {
  color: #fd6f6b;
  font-weight: bold;
  border-bottom: 0.04rem solid #fd6f6b;
  margin: 0 0.3rem;
  height: 0.7rem;
}
.filter_box .filter_icon {
  width: 0.22rem;
  height: 0.23rem;
  margin-left: 0.1rem;
}
/* element-ui */
.filter_container /deep/ .el-drawer {
  width: 95% !important;
}
.filter_container /deep/ .el-button {
  border: 0px solid black;
  padding: 0 20px 0 0;
    color:#8f8dab;

}
.filter_container /deep/  .el-button:focus{
  color:#8f8dab;
  background:white;
}
/deep/ .v-modal {
  z-index: 100;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  color: red;
}
.total_resource {
  color: #bdc1cb;
  font-size: 12px;
  font-weight: 500;
  line-height: 0.48rem;
  margin-left: 0.3rem;
  margin-top: 0.34rem;
}

/* 加载中 */
.page-infinite-loading {
  text-align: center;
  /* padding: 10px; */
  color: #999999;
  font-size: 14px;
}
</style>
